<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>

</script>

<template>
    <div class="card loading">
        <div class="image">
        </div>
        <div class="content">
            <h4></h4>
            <h4></h4>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$--loading-grey: #ededed;

.card {
    width: 100%;
    height: 20rem;

    border-radius: 6px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.image {
    height: 15rem;
}

.content {
    padding: .5rem 1.3rem;
}

h4 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.loading .image,
.loading h4 {
    background-color: var(--loading-grey);
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%) $--loading-grey;
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 1.6rem;
    border-radius: 4px;
    animation-delay: .05s;
}

.loading .description {
    min-height: 4rem;
    border-radius: 4px;
    animation-delay: .06s;
}
</style>